<div class="submenu">
    <div class="label-bar-container">
        <label for="modelSelectContainer" class="button-label" onclick="toggleModelSelectPanel()">Select Ai</label>
        <div class="model-select-container" id="modelSelectContainer">
            <div class="model-select-panel hidden">
                <br />
                <div id="template-dropdowns" class="inference-template-wrapper">
                    <div class="dropdown-wrapper" id="wrapper-inference">
                        <label for="inference-select">Inference</label>
                        <div class="dropdown-container">
                            <select id="inference-select" class="model-selector custom-select">
                                <option value="OpenAi">OpenAi</option>
                                <option value="anthropic">Anthropic</option>
                                <option value="GROQ">Groq</option>
                                <option value="ollama">Ollama</option>
                                <option value="custom">Custom</option>
                            </select>
                        </div>
                    </div>
                    <br />
                    <div class="dropdown-wrapper" id="wrapper-openai">
                        <label for="open-ai-select">OpenAi</label>
                        <div class="dropdown-container">
                            <select id="open-ai-select" class="model-selector custom-select">
                                <option value="gpt-4o">GPT-4o</option>
                                <option value="gpt-4o-mini">GPT-4o-mini</option>
                                <option value="gpt-4">GPT-4</option>
                                <option value="gpt-4-turbo">GPT-4-turbo</option>
                                <option value="gpt-3.5-turbo">GPT-3.5-turbo</option>
                            </select>
                        </div>
                    </div>
                    <div class="dropdown-wrapper" id="wrapper-anthropic">
                        <label for="anthropic-select">Claude</label>
                        <div class="dropdown-container">
                            <select id="anthropic-select" class="model-selector custom-select">
                                <option value="claude-3-5-sonnet-20240620">3.5 Sonnet</option>
                                <option value="claude-3-opus-20240229">3 Opus</option>
                                <option value="claude-3-sonnet-20240229">3 Sonnet</option>
                                <option value="claude-3-haiku-20240307">3 Haiku</option>
                            </select>
                        </div>
                    </div>
                    <div class="dropdown-wrapper" id="wrapper-groq">
                        <label for="groq-select">Groq</label>
                        <div class="dropdown-container">
                            <select id="groq-select" class="model-selector custom-select">
                                <option value="gemma2-9b-it">Gemma2-9b-it</option>
                                <option value="gemma-7b-it">Gemma-7b-it</option>
                                <option value="mixtral-8x7b-32768">Mixtral 8x7b 32k</option>
                                <option value="llama-3.2-3b-preview">Llama 3.2 3b</option>
                                <option value="llama-3.2-1b-preview">Llama 3.2 1b</option>
                                <option value="llama-3.1-70b-versatile">Llama 3.1 70b</option>
                                <option value="llama-3.1-8b-instant">Llama 3.1 8b</option>
                                <option value="llama3-70b-8192">Llama3-70b</option>
                                <option value="llama3-8b-8192">Llama3-8b</option>
                            </select>
                        </div>
                    </div>
                    <div class="dropdown-wrapper" id="wrapper-ollama">
                        <label for="local-model-select">
                            <button id="openOllamaModalButton" class="linkbuttons">+ Ollama</button>
                        </label>
                        <div class="dropdown-container">
                            <select id="local-model-select" class="model-selector custom-select">
                                <option value="llama3">none</option>
                            </select>
                        </div>
                    </div>
                    <div class="dropdown-wrapper" id="wrapper-custom">
                        <label for="custom-model-select">
                            <button id="addApiConfigBtn" class="linkbuttons">+ Custom</button>
                            <button id="deleteApiConfigBtn" class="linkbuttons">-</button>
                        </label>
                        <div class="dropdown-container">
                            <select id="custom-model-select" class="model-selector custom-select">
                                <option value="none">none</option>
                                <!-- dynamic values -->
                            </select>
                        </div>
                    </div>


                </div>
            </div>

            <div class="toggle-panel" onclick="toggleModelSelectPanel()" style="padding-top: 15px;">
                <div class="bar left-bar"></div>
                <div class="icon-wrapper">
                    <div class="toggle-icon">
                        <!-- Icon SVG -->
                        <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </div>
                <div class="bar right-bar"></div>
            </div>
        </div>
    </div>
    <br />
    <div class="label-bar-container">
        <label for="contextSettingsContainer" class="button-label" onclick="toggleContextSettingsPanel()">Context Settings</label>
        <div class="context-settings-container" id="contextSettingsContainer">
            <div class="context-settings-panel hidden">

                <div class="dropdown-wrapper" id="wrapper-embeddings" style="margin-top: 10px; margin-bottom: 10px;">
                    <button id="vectorDbSearchButton" class="linkbuttons search-button" title="Search Vector Embeddings Database">
                        <svg class="icon">
                            <use xlink:href="#searchSVG"></use>
                        </svg>
                    </button>
                    <button id="openVectorDbButton" class="linkbuttons search-button">Vector-DB</button>
                    <div class="dropdown-container">
                        <select id="embeddingsModelSelect" class="model-selector custom-select">
                            <option value="local-embeddings-gte-small">gte-small (in-browser)</option>
                            <option value="local-embeddings-all-MiniLM-L6-v2">all-MiniLM-L6-v2 (in-browser)</option>

                            <option value="text-embedding-3-small">ada-3-small</option>
                            <option value="text-embedding-3-large">ada-3-large</option>
                            <option value="text-embedding-ada-002">ada-2</option>

                            <option value="mxbai-embed-large">mxbai</option>
                            <option value="nomic-embed-text">nomic</option>
                            <option value="all-minilm">all-minilm</option>
                        </select>
                    </div>
                </div>

                <div class="checkboxarray">
                    <div title="Enable Web Search Results">
                        <input type="checkbox" id="google-search-checkbox" name="enable-search">
                        <label for="google-search-checkbox">Search</label>

                    </div>
                    <div title="Enable Code Instructions and Buttons">
                        <input type="checkbox" id="code-checkbox" name="code-checkbox">
                        <label for="code-checkbox">Code</label>
                    </div>
                    <div title="Self-Prompted AI">
                        <input type="checkbox" id="auto-mode-checkbox">
                        <label for="auto-mode-checkbox">Auto</label>
                    </div>
                    <div title="Retrieve Document Snippets and send to AI">
                        <input type="checkbox" id="embed-checkbox">
                        <label for="embed-checkbox">Data</label>
                    </div>
                    <div title="Query Wolfram Alpha">
                        <input type="checkbox" id="enable-wolfram-alpha" name="enable-wolfram-alpha">
                        <label for="enable-wolfram-alpha">Wolfram</label>
                    </div>
                    <div title="Query Wikipedia">
                        <input type="checkbox" id="wiki-checkbox">
                        <label for="wiki-checkbox">Wiki</label>


                    </div>
                </div>
                <div class="gridLayout" id="aiParameterGrid" style="padding-top: 15px;">
                    <div class="settingsSlider" title="Set the Token Limit for Calls to GPT">
                        <label for="max-tokens-slider">Max Tokens: <br /><span id="max-tokens-display">2000</span></label>
                        <input type="range" id="max-tokens-slider" name="max-tokens-slider" min="10" max="16000" value="2000" step="1">
                    </div>

                    <div class="settingsSlider" title="Set the Tempurature for Calls to GPT">
                        <label id="model-temperature-label" for="model-temperature">Tempurature:<br /> 0.6</label>
                        <input type="range" id="model-temperature" name="model-temperature" min="0" max="1" step="0.1" value="0.6">
                    </div>

                    <div class="settingsSlider" title="Set the Proportion of Tokens Dedicated to AI Memory">
                        <span id="max-context-size-display">2000</span>
                        <input type="range" id="max-context-size-slider" name="max-context-size-slider" min="0" max="2000" value="555" step="1">
                    </div>

                    <div class="settingsSlider" title="Number of Notes Retrieved from Neurite and Sent to AI">
                        <label id="node-slider-label">Top 3 <br />nodes</label>
                        <input type="range" id="node-count-slider" name="node-count-slider" min="1" max="25" value="3">
                    </div>

                </div>

            </div>
            <div class="toggle-panel" onclick="toggleContextSettingsPanel()" style="padding-top: 15px;">
                <div class="bar left-bar"></div>
                <div class="icon-wrapper">
                    <div class="toggle-icon">
                        <!-- Icon SVG -->
                        <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </div>
                <div class="bar right-bar"></div>
            </div>
        </div>
    </div>
    <br />
    <div class="label-bar-container">
        <label for="apiContainer" class="button-label" onclick="toggleAPIPanel()">API Keys</label>
        <div class="api-container" id="apiContainer">
            <div class="api-panel hidden">
                <div class="api-inputs">
                    <div>
                        <label for="api-key-input">OpenAI:</label>
                        <input type="password" id="api-key-input" class="api-input">
                    </div>
                    <div class="google-key-input">
                        <label for="GROQ-api-key-input">GROQ:</label>
                        <input type="password" id="GROQ-api-key-input" class="api-input">
                    </div>
                    <div class="google-key-input">
                        <label for="anthropic-api-key-input">Anthropic:</label>
                        <input type="password" id="anthropic-api-key-input" class="api-input">
                    </div>
                    <div class="google-key-input">
                        <label for="googleApiKey">Google:</label>
                        <input type="password" id="googleApiKey" class="api-input">
                    </div>
                    <div class="google-key-input">
                        <label for="googleSearchEngineId">Search Engine ID:</label>
                        <input type="password" id="googleSearchEngineId" class="api-input">
                    </div>
                    <div class="wolfram-key-input">
                        <label for="wolframApiKey">Wolfram:</label>
                        <input type="password" id="wolframApiKey" class="api-input">
                    </div>
                </div>

                <div class="api-buttons">
                    <button class="key-button" onclick="saveKeys()">Save Keys</button>
                    <button class="key-button" onclick="clearKeys()">Clear Keys</button>
                    <button class="key-button" id="saveToFileButton" onclick="saveKeysToFile()">Keys .txt</button>
                    <button class="key-button" id="loadFromFileButton" onclick="loadKeysFromFile()">Load Keys</button>
                </div>
            </div>
            <div class="toggle-panel" onclick="toggleAPIPanel()" style="padding-top: 15px;">
                <div class="bar left-bar"></div>
                <div class="icon-wrapper">
                    <div class="toggle-icon">
                        <!-- Icon SVG -->
                        <svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                        </svg>
                    </div>
                </div>
                <div class="bar right-bar"></div>
            </div>
        </div>
    </div>
</div>